//
import React from 'react'
import { ShoppingCartOutlined, CalculatorOutlined, FileTextOutlined, ClearOutlined, SettingOutlined, DingdingOutlined, MoreOutlined, HistoryOutlined, TeamOutlined } from '@ant-design/icons';
import { Avatar, Layout, Menu, theme, Modal } from 'antd';
import { useState, useEffect } from 'react';
import { useDispatch } from 'react-redux';//这个是读取state的
import { setLogoutState } from '../../store/slice/loginslice';
import './MainCmpt.css'
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { usePostlogoutMutation } from '../../store/request/loginrequest';
import { useGetlastestsystemversionQuery } from '../../store/request/systemversionrequest';
import { useSelector } from 'react-redux';

const { Header, Content, Footer, Sider } = Layout;

function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}

const leftitems = [
  getItem('数据处理', 'lmdatacorrection', <ClearOutlined />, [
    //getItem('数据修正（不保存）', 'lmdataclean'),
    getItem('数据修正', 'lmdatasaveclean'),
    getItem('毛刺清洗', 'lmspikeremove'),
    getItem('数据预测', 'lmsdatapredict'),
    getItem('LSTM预测', 'datalstmpredict'),
    getItem('报文转CSV', 'dbctransfer'),
    // getItem('CSVI转化', 'lmsdataconvert'),
    getItem('里程校验', 'lmmileagecheck'),
  ]),
  getItem('csv合并', 'combinecsv', <FileTextOutlined />, [
    getItem('半小时', 'lmhalfhourcombine'),
    getItem('停车间隔', 'lmtxtcombine'),
    getItem('单位里程', 'lmmileagecombine'),

  ]),
  getItem('导入计算保存', 'calculate', <CalculatorOutlined />, [
    getItem('半小时', 'halfhourcal'),
    getItem('单位里程', 'mileagecal'),
  ]),
  getItem('自动化处理', 'automation', <ShoppingCartOutlined />, [
    getItem('清洗到预测', 'cleantopredict'),

  ]),
]

const MainCmpt = () => {
  //console.log("maincmpt");
  const version = useGetlastestsystemversionQuery();
  console.log(version);
  const loginstate = useSelector(state => state.loginpara);
  const webapiavarterpath = window.app + "AvarterUpload/";
  // console.log(loginstate.role.avatarpath);
  const [edittrigger] = usePostlogoutMutation();
  const dispatch = useDispatch();
  const navigate = useNavigate();//获取navigateapi
  const location = useLocation();//获取地址api
  const [collapsed, setCollapsed] = useState(false);

  const [username] = useState(location.state);//从登陆成功后会传递用户名参数到这里，然后由usestate来获取
  const [activeKeySide, setActiveKeySide] = useState("");//侧边菜单项的突出显示key
  const [activeKeyHorizontal, setActiveKeyHorizontal] = useState("");//水平菜单项的突出显示key
  const [modalVisible, setModalVisible] = useState(false); // 控制弹出框显示

  const handleSelectSide = (item) => {
    setActiveKeySide(item.key);
    setActiveKeyHorizontal("");//当选中侧边菜单项时，取消水平菜单项的突出显示
  };

  const handleSelectHorizontal = (item) => {
    setActiveKeyHorizontal(item.key);
    setActiveKeySide(""); // 取消侧边菜单项的选中状态
  };

  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const topitem = [

    getItem(username, 'user', <Avatar src={loginstate && <img src={webapiavarterpath + loginstate.role.avatarpath} alt="加载图片" />} />,
      [
        getItem('修改密码', 'passwordedit'),
        getItem('修改头像', 'avateredit'),
        getItem('注销', 'logout'),

      ]),


    getItem('设置', 'setup', <SettingOutlined />, [
      getItem('账户', 'accountsetup', <TeamOutlined />),
      getItem('参数', 'propertysetup', <SettingOutlined />, [
        getItem('线性转换', 'linearconvertprops'),
        loginstate.role.loginname === "admin" && getItem('公共', 'tmpublicprops')

      ])
    ]),
    getItem('版本', 'systemversion', <DingdingOutlined />, [
      getItem('版本记录', 'versionhistory', <HistoryOutlined />),
      getItem('版本时间轴', 'versiontimeline', <MoreOutlined />)

    ]),
  ];

  //主导航菜单栏的点击事件，增加tabitem
  const mainmenuonClick = (e) => {

    //根据e.key来跳转路由
    navigate(e.key, true);
    // console.log("点击了tab"+activateitem);

  };
  //副导航菜单栏的点击事件
  const submenuonClick = async (e) => {
    if (e.key === 'logout') {
      await edittrigger();
      dispatch(setLogoutState())
    }
    else {
      navigate(e.key, true);
    }

  };
  // 使用 useEffect 来在组件加载时弹出版本信息
  useEffect(() => {
    if (version.isSuccess) {
      setModalVisible(true); // 如果版本信息成功加载，显示对话框
    }
  }, [version.isSuccess]); // 只有当 version.isSuccess 为 true 时才显示对话框


  return (
    <Layout
      style={{
        minHeight: '100vh',
      }}
    >
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        {/* 这个是logo放的位置 */}

        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            height: 32,
            margin: 16,
            // border: '1px solid',
            color: 'whitesmoke',
            textAlign: 'center',

          }}>处理系统V{version.isSuccess ? version.data.version : "1.0.0"}</div>
        {/* 这个是主导航菜单放的位置 */}
        <Menu onClick={mainmenuonClick} selectedKeys={[activeKeySide]} onSelect={handleSelectSide} theme="dark" mode="inline" items={leftitems} />
      </Sider>
      <Layout className="site-layout">
        <Header

          style={{
            padding: 0,
            background: colorBgContainer,

          }}
        >
          {/* 这个是副导航菜单放的位置 */}
          <Menu onClick={submenuonClick} selectedKeys={[activeKeyHorizontal]} onSelect={handleSelectHorizontal} theme="dark" mode="horizontal" items={topitem} />

        </Header>
        <Content
          style={{
            margin: '10px',
          }}
        >

          <div
            style={{
              padding: 24,
              minHeight: 540,
              background: colorBgContainer,
            }}
          >
            <Outlet />

          </div>
        </Content>
        <Footer
          style={{
            textAlign: 'center',
          }}
        >
          大数据处理系统V{version.isSuccess ? version.data.version : "1.0.0"} Design ©2023 Created by 俞晓辉
        </Footer>
      </Layout>

      {/* 版本信息弹出框 */}
      <Modal
        title="系统版本信息"
        open={modalVisible}
        onCancel={() => setModalVisible(false)}
        footer={null}
      
      >
        <p>当前系统版本: {version.isSuccess ? version.data.version : "1.0.0"}</p>
        <p>版本说明：{version.isSuccess ? version.data.commit : "无更新内容"}</p>
      </Modal>

    </Layout>
  );
}

export default MainCmpt

